<template>
  <div class="app-container" style="min-height:483px;height:calc(71vh - 50px);">
    <div style="height:100%">
      <!-- 列表选择 -->
      <el-row type="flex" justify="start" style="margin-bottom:8px;margin-top:-8px">
        <div style="width:130px;display:flex;">
          <el-col style="background-color:#D80A1E;height:20px;width:20px;" :offset="0"> </el-col>
          <el-col class="projectStateContext" style="margin-left:4px;" :offset="0">
            项目超期
          </el-col>
        </div>
        <div style="width:150px;display:flex;">
          <el-col style="background-color:#FF8C2E;height:20px;width:20px" :offset="0"> </el-col>
          <el-col class="projectStateContext milepost" style="margin-left:4px;" :offset="0">
            里程碑及任务超期
          </el-col>
        </div>
        <div style="width:130px;display:flex;">
          <el-col style="background-color:#0000FF;height:20px;width:20px" :offset="0"> </el-col>
          <el-col class="projectStateContext" style="margin-left:4px;" :offset="0">
            流程超期
          </el-col>
        </div>
        <div style="width:130px;display:flex;">
          <el-col style="background-color:#B8860B;height:20px;width:20px" :offset="0"> </el-col>
          <el-col class="projectStateContext" style="margin-left:4px;" :offset="0">
            任务超期
          </el-col>
        </div>
      </el-row>
      <!--表格渲染-->
      <el-table class="tl-table" ref="mainTable" height="83%" v-loading="loading" :data="datas" row-key="id" border fit :row-class-name="doChangeRowClassName" :row-style="tableRowStyle" @row-dblclick="doRowDbClick">
        <!-- <el-table-column type="selection" width="55px" fixed="left" :selectable="doDisableCheckBox"></el-table-column> -->
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="deptname" label="所属部门" width="110px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="projectname" label="项目名称" min-width="300px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="projectmanager" label="项目经理" width="80px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispprojectlevel" label="级别" width="50px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="participatemoney" label="可参与金额(万元)"  width="130px" align="right" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="projectcode" label="项目编号" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="currentmilepost" label="当前里程碑及任务" width="150px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager">
        <el-pagination :pager-count="5" small @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
      <index-for-query-comp ref="indexForQueryComp" :projectcode="projectcode"></index-for-query-comp>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'
import indexForQueryComp from '@/views/mpm/projectInfo/indexForQueryComp'
export default {
  name: 'mpmProject',
  mixins: [mixin_list],
  components: { indexForQueryComp },
  data() {
    return {
      projectlevelList: [],
      description: '项目立项-列表查询',
      urlPrefix: '/mpm/mpmIndex/',
      url: {
        queryCodeList: '/mpm/projectpolymerization/dataCodeList'
      },
      clientHeight: Number,
      // 排序参数
      sorterInfo: {
        sidx: 'mpmproject.ABNORMALSTATE',
        sord: 'desc'
      },
      isQueryOnCreated: false,
      projectcode: ''
    }
  },
  methods: {
    /** 获取查询参数 */
    getQueryParams(paramExt) {
      let param = {}
      if (this.projectlevelList) {
        param.query_projectlevel = this.projectlevelList.join(',')
      }
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      Object.assign(param, this.queryParam, this.sorterInfo, this.filtersInfo, paramExt)
      param.currentPage = this.pageInfo.currentPage
      param.pageSize = this.pageInfo.pageSize
      return filterObjectNull(param)
    },
    // 禁用表格前面的选择
    doDisableCheckBox(row, index) {
      if (row.state !== 0 && row.state !== 2) {
        return false
      } else {
        return true
      }
    },
    // 行颜色
    tableRowStyle(row, index) {
      if (row.row.abnormalstate === 30) {
        return { 'background-color': '#D80A1E', color: '#FFFFFF' }
      } else if (row.row.abnormalstate === 20) {
        return { 'background-color': '#FF8C2E', color: '#FFFFFF' }
      } else if (row.row.abnormalstate === 10) {
        return { 'background-color': '#FAD232', color: '#FFFFFF' }
      } else if (row.row.abnormalstate === 15) {
        return { 'background-color': '#0000FF', color: '#FFFFFF' }
      }
    },
    // 双击打开项目追踪页面
    doRowDbClick(row, column, event) {
      this.projectcode = row.projectcode
      this.$nextTick(() => {
        this.$refs.indexForQueryComp.id = row.id
        this.$refs.indexForQueryComp.visible = true
      })
    }
  },
  created() {
    this.queryParam = this.$parent.queryParam
    this.loadData({})
  },
  beforeMount() {
    this.clientHeight = document.body.clientHeight
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  margin: 10px 20px 0 20px;
}
.app-container >>> .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 7px; // 横向滚动条
  height: 7px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(144, 147, 153, 0.3);
}
/deep/ .el-table__fixed-right {
  height: 100% !important;
}
/deep/ .el-table__body-wrapper {
  cursor: pointer;
}
.pagebar /deep/ .el-input--mini .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>
